let $ = layui.jquery;
import addInfo from "./addInfo.js";
import updateInfo from "./updateInfo.js";

export default class Info {
  constructor() {
    this.render();
    this.handle();
  }
  render() {
    let template = `
    <form class="layui-form" action="" style="margin-left:550px">
      <div class="layui-form-item">
        <label class="layui-form-label">查询</label>
        <div class="layui-input-inline">
          <select name="type" lay-verify="required">
            <option value="title">标题</option>
          </select>
        </div>
        <div class="layui-input-inline">
          <input
            type="text"
            name="value"
            placeholder="请输入"
            autocomplete="off"
            class="layui-input"
          />
        </div>
        <div class="layui-input-inline">
          <button
            id="queryBtn"
            type="button"
            class="layui-btn"
            lay-filter="formDemo"
          >
            立即查询
          </button>
        </div>
        
        </div>
    </form>
    
    
<script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addUser">
          新增用户
        </button>
      </div>
    </script>  
   
    <script type="text/html" id="addInfo"></script>
    <script type="text/html" id="updateInfo"></script>

     


    <div class="layui-container">
      <div class="layui-row">
        <div class="layui-col-md12">
          <table id="demo" lay-filter="tableFilter"></table>
        </div>

        <script type="text/html" id="barDemo">
          <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
            >删除</a
          >
        </script>
      </div>
    </div>
`
$("#content").html(template);
  }

  handle() { 
    let form = layui.form;
    let table = layui.table;
    form.render();
     //第一个实例
     table.render({
      id: "idTest",
      elem: "#demo",
      url: "/api/info/infoList", //数据接口
      toolbar: "#toolbarDemo",
      page: true, //如果打开这一项，实际往后台传递的url地址是 /users?page=1&limit=10
      cols: [
        [
          //表头
        
          { field: "title", title: "标题", width: 200 },
          { field: "date", title: "发稿时间", templet:function(d){
            return d.date.slice(0,10);
          },width:120 },
          { field: "image", title: "配图",
           templet: function (d) {
            let imgs=" "
            for(let i=0;i<d.image.length;i++){
                imgs+=" "+d.image[i].img
            }
            return imgs;
          },width:180
        },
          { field: "text", title: "文段",templet:function(d){
            let texts=" "
            for(let i=0;i<d.image.length;i++){
                texts+=" "+d.image[i].text
            }
            return texts;
          }, width: 200 },
          { field: "comment", title: "评论",templet:function(d){
            let comments=" "
            for(let i=0;i<d.comment.length;i++){
                comments+=" "+d.comment[i]
            }
            return comments;
          } ,width: 200 },
          {
            fixed: "right",
      
            title: "操作",
            align: "center",
            toolbar: "#barDemo",
          }, //这里的toolbar值是模板元素的选择器
        ],
      ],
     });


      //头工具栏事件
    table.on("toolbar(tableFilter)", function (obj) {
     
        switch (obj.event) {
          case "addUser":
            new addInfo();
            break;
        }

      })

    //操作事件
     table.on("tool(tableFilter)", function (obj) {
      var data = obj.data; 
      // console.log(data)
      var layEvent = obj.event;
      
        if (layEvent === "del") {
          //删除
        
          layer.confirm("确定删除吗？", function (index) {
            $.ajax({
              type: "delete",
              url: "/api/info/delinfo/" + data._id,
              success: function (res) {
                console.log(res);
                if (res.code === 1) {
                  layer.msg(res.msg);
                  obj.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存
                }else{
                  layer.msg(res.msg);

                }
              },
            });

            layer.close(index);
          });
        } else if (layEvent === "edit") {
          //编辑
          new updateInfo(data);

        }
      });
    
  
     

     $("#queryBtn").on("click", function () {
            let key = $("select[name='type']").val();
            let val = $("input[name='value']").val();
            console.log(666);
            table.reload("idTest", {
                where: { //设定异步数据接口的额外参数，任意设
                    key,
                    val
                },
                page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        })

    }

}